/**
 *  描述标题组件
 */
import React, { memo } from 'react'
import { NavLink } from 'react-router-dom';

//2.属性验证
import PropTypes from "prop-types";

import { HeaderWrapper } from "./style";

const ThemeHeaderRCMD = memo((props) => {
  const { title, keywords, moreLink, keywordClick } = props;
  //1.
  // const { title, keywords = [] } = props;

  return (
    <HeaderWrapper className="sprite_02">
      <div className="left">
        <h3 className="title">{title}</h3>
        <div className="keyword">
          {
            keywords.map((item, index)=> {
              return (
                <div className="item" key={item}>
                  <span className="link" onClick={e => keywordClick(item)}>{item}</span>
                  {index !== keywords.length - 1 && <span className="divider">|</span>}
                </div>
              )
            })
          }
        </div>
      </div>

      <div className="right">
        <NavLink to={moreLink}>更多</NavLink>
        <i className="icon sprite_02"></i>
      </div>
    </HeaderWrapper>
  )
})

ThemeHeaderRCMD.propTypes = {
  title: PropTypes.string.isRequired,
  keywords: PropTypes.array
}

ThemeHeaderRCMD.defaultProps = {
  keywords: []
}

export default ThemeHeaderRCMD